<template>
	<view class="patient-record">
		<div class="header" style="position: fixed;top:300px;left:0;z-index: 999999;	">
			<button @click="init">初始化</button>
			<button type="default" @click="join">加入房间</button>
			<button type="default" @click="leave">离开房间</button>
			<button type="default" @click="anchor">主播</button>
			<button type="default" @click="audience">关闭视频</button>
			<button type="default" @click="getRemoteStreams">关闭音频</button>
			<button type="default" @click="toogle">切换</button>
			<div>
				<span>uid:</span>
				<!--修改-->
				<input style="width: 40px;" type="text" v-model="uid" @change="setUid" />
			</div>
			<div>
				<span>channel:</span>
				<input style="width: 40px;" type="text" v-model="channel" @change="setChannel" />
			</div>
		</div>
		<view class="con-content">
			<view class="con-video" @click.stop="btnFlag = !btnFlag">
				<view class="agora-theme">
					<div class="col s7">
						<div class="video-grid" id="video">
							<div class="video-view" v-show="!btnFlag">
								<!-- 我的视频 -->
								<div id="local_stream" class="video-placeholder"></div>
							</div>
							<!-- 主视频 -->
							<div id="max_window"><div class="video-view1" :id="max_video"></div></div>
						</div>
						<view class="uni-tip-group-time" v-show="!btnFlag">通话累计时长：{{ hh }}：{{ mm }}：{{ ss }}</view>
						<view
							class="option"
							@click.stop="
								'return';


							"
							v-show="!btnFlag"
						>
							<select name="public-choice" v-model="couponSelected" @change="getCouponSelected">
								<option :value="coupon.id" v-for="coupon in couponList">{{ coupon.name }}</option>
							</select>
						</view>
						<!-- 视频列表 -->
						<div class="play_list_videos" id="video" v-show="!btnFlag">
							<div v-bind:key="v" v-for="(v, k) in playLists">
								<div :id="buildEleId('player_', v)" class="remote_video">
									<div class="remote_video" :id="buildEleId('remote_video_pannel_', v)">
										<div class="remote_video" :id="buildEleId('remote_video_', v)"></div>
										<!--<div class="remote_video" :id="buildEleId('remote_video_info_', v)"></div>-->
										<!--<div class="remote_video" :id="buildEleId('video_autoplay_', v)"></div>-->
									</div>
								</div>
							</div>
							<view class="hujiaozhong" v-show="hujiaobox">
								<view class="hujiaozhong-title">北京军区总医院 - 急诊科</view>
								<view class="hujiaozhong-des">呼叫中...</view>
								<button>电话提醒</button>
							</view>
						</div>
					</div>
				</view>

				<view class="uni-tip-group-button" v-show="!btnFlag">
					<button @click.stop="yaoqing">邀请</button>
					<button @click="jieshu">退出</button>
					<button @click="jieshu">结束</button>
					<image class="vioce" src="../static/image/icon (4)@2x.png" mode=""></image>
					<view class="uni-padding-wrap uni-common-mt" style="width: 124.56px;">
						<!-- <view class="uni-title">设置最小/最大值</view> -->
						<view><slider value="50" @change="sliderChange" min="0" max="100" block-size="16" /></view>
					</view>
					<view class="shezhi-btn" @click.stop="shezhi"><image src="../static/image/shezhi@2x.png" mode=""></image></view>
					<!-- <image src="../static/image/guaduan@2x.png"></image> -->
				</view>
			</view>
			<view class="con-detail scrollBar">
				<view class="con-box" v-show="box1">
					<view class="con-tab">
						<text :class="current === 0 ? 'active' : ''" @tap="current = 0">患者信息</text>
						<text :class="current === 1 ? 'active' : ''" @tap="current = 1">电子病历</text>
						<text :class="current === 2 ? 'active' : ''" @tap="current = 2">健康档案</text>
					</view>
					<view class="con-des" v-show="current === 0">
						<view>
							<text>患者姓名：</text>
							<text>{{ dispatchCase.patientName }} {{ dispatchCase.patientSex === 1 ? '男' : '女' }} {{ dispatchCase.patientAge }}岁</text>
						</view>
						<view>
							<text>联系方式：</text>
							<text>{{ dispatchCase.patientMobile }}</text>
						</view>
						<view>
							<text>患者地址：</text>
							<text>{{ dispatchCase.patientAddress }}</text>
						</view>
						<view>
							<text>主诉症状：</text>
							<text>{{ dispatchCase.majorCase }}</text>
						</view>
						<view>
							<text>查体结果：</text>
							<text>{{ dispatchCase.medicine }}</text>
						</view>
						<view>
							<text>初步诊断：</text>
							<text>{{ dispatchCase.baseHelp }}</text>
						</view>
					</view>
					<view class="con-des" v-show="current === 1">
						<view>
							<text class="color3">2020-2-25 {{ caseInfoMange.userName }} 急救病历</text>
							<text><a :href="'http://60.205.202.107:39500' + reportList.emergencyCases" target="view_window">查看详情</a></text>
						</view>
						<view>
							<text class="color3">2020-2-25 {{ caseInfoMange.userName }} 心电图</text>
							<text><a :href="'http://60.205.202.107:39500' + reportList.electrocardiogramReport" target="view_window">查看详情</a></text>
						</view>
						<view>
							<text class="color3">2020-2-25 {{ caseInfoMange.userName }} 血气分析</text>
							<text><a :href="'http://60.205.202.107:39500' + reportList.fleshReport" target="view_window">查看详情</a></text>
						</view>
						<view>
							<text class="color3">2020-2-25 {{ caseInfoMange.userName }} 肌钙检测</text>
							<text><a :href="'http://60.205.202.107:39500' + reportList.muscleCalciumReport" target="view_window">查看详情</a></text>
						</view>
						<view>
							<text class="color3">2020-2-25 {{ caseInfoMange.userName }} B超报告</text>
							<text><a :href="'http://60.205.202.107:39500' + reportList.ultrasonicReport" target="view_window">查看详情</a></text>
						</view>
						<view>
							<text class="color3">2020-2-25 {{ caseInfoMange.userName }} 健康档案</text>
							<text><a :href="'http://60.205.202.107:39500' + reportList.healthRecord" target="view_window">查看详情</a></text>
						</view>
					</view>
					<view class="con-des" v-show="current === 2">
						<view class="archives" v-if="isArchives">
							<image src="../static/image/ziyuan@2x.png" mode=""></image>
							<view class="">查看详情</view>
						</view>
					</view>
				</view>

				<view class="charts">
					<view>
						<view @click="xindiantu" v-show="box2">
							<view class="typeTitle">
								<text class="typeTitle-head">心电监护</text>
								<text class="typeTitle-content">详细数据</text>
							</view>
							<view class="xindiantu-top">
								<view class="left">
									<view class="left-top">
										<text>ECG</text>
										<text class="smail">bpm</text>
									</view>
									<view class="left-bottom">
										<text class="font15">60</text>
										<text class="smail">50-120</text>
									</view>
								</view>
								<view class="middle">
									<view class="middle-top">
										<text>NIBP 手动</text>
										<text class="smail">mmHg</text>
									</view>
									<view class="middle-bottom">
										<text class="font15">120/90</text>
										<view class="tr">
											<view>(--)</view>
											<view class="smail">50-120</view>
										</view>
									</view>
								</view>
								<view class="right">
									<view class="right-top">
										<view>SpO2</view>
										<view class="smail">%</view>
									</view>
									<view class="right-bottom">
										<view class="font15">97</view>
										<view>
											<view class="smail" style="float: left;margin-left: 10px;">PR- -</view>
											<view class="smail" style="float: right;">PI- -</view>
											<view class="smail">50-120</view>
										</view>
									</view>
								</view>
							</view>
							<view class="xindiantu-bottom">
								<view class="left">
									<view class="left-top">
										<text>Resp</text>
										<text class="smail">rpm</text>
									</view>
									<view class="font15 left-middle">0</view>
									<view class="left-bottom smail">0~30</view>
								</view>
								<view class="middle1">
									<view class="middle1-top">
										<text>Art</text>
										<text class="smail">rpm</text>
									</view>
									<view class="font15 middle1-middle">--/--</view>
									<view class="middle1-bottom smail" style="margin-top: -4px;">0~30</view>
								</view>
								<view class="middle2">
									<view class="middle2-top">
										<text>TEMP</text>
										<text class="smail">℃</text>
									</view>
									<view class="middle1-middle">
										<span style="float: left;">T1- -</span>
										<span style="float: right;">T2- -</span>
									</view>
									<view class="middle1-bottom smail">35~38</view>
								</view>
								<view class="right">
									<view class="right-top">
										<text>CO2</text>
										<text class="smail">mmol/L</text>
									</view>
								</view>
							</view>
							<view class="xindiantu-chart">
								<text>||</text>
								<canvas class="monitor-left-item-charts" canvas-id="mdc_ecg_elec_potl_i" id="mdc_ecg_elec_potl_i"></canvas>
							</view>
						</view>
						<view class="huxiji" @click="huxiji" v-show="box3">
							<!-- <view class="huxiji-top">
								<view>
									<image class="img1" src="../static/image/Fill 1@2x(1).png" mode=""></image>
									<image class="img2" src="../static/image/Fill 1@2x.png"></image>
								</view>
								<view>气源压力低于 2.7 bar</view>
								<view>A/C</view>
							</view> -->
							<view class="typeTitle">
								<text class="typeTitle-head">呼吸机</text>
								<text class="typeTitle-content">详细数据</text>
							</view>
							<view class="huxiji-left">
								<view class="huxiji-middle">
									<view class="huxiji-content">
										<view class="top">
											<view class="middle-top">
												<text>Ppeak</text>
												<text>mbar</text>
											</view>
											<view class="middle-bottom">500</view>
										</view>

										<view class="top">
											<view class="middle-top">
												<text>Pmean</text>
												<text>mbar</text>
											</view>
											<view class="middle-bottom">11</view>
										</view>

										<view class="top">
											<view class="middle-top">
												<text>PEEP</text>
												<text>mbar</text>
											</view>
											<view class="middle-bottom">11</view>
										</view>
									</view>
									<view class="huxiji-content">
										<view class="top">
											<view class="middle-top">
												<text>Vti</text>
												<text>ml</text>
											</view>
											<view class="middle-bottom">500</view>
										</view>
										<view class="top">
											<view class="middle-top">
												<text>Mvi</text>
												<text>L/min</text>
											</view>
											<view class="middle-bottom">6.0</view>
										</view>
									</view>
									<view class="huxiji-content">
										<view class="top">
											<view class="middle-top">
												<text>EtCO2</text>
												<text>mmHg</text>
											</view>
											<view class="middle-bottom">4.0</view>
										</view>
									</view>
									<view class="huxiji-content">
										<view class="top">
											<view class="middle-top">
												<text>F(fspn)</text>
												<text>1/min</text>
											</view>
											<view class="middle-bottom">12</view>
										</view>
									</view>
								</view>
								<view class="huxiji-right">
									<view class="xindiantu-chart">
										<canvas class="monitor-left-item-charts" canvas-id="mdc_ecg_elec_potl_ii" id="mdc_ecg_elec_potl_ii"></canvas>
									</view>
								</view>
								<view class="huxiji-right-btns">
									<view>
										<button>1:3:2</button>
										<view>吸呼比</view>
									</view>
									<view>
										<button>1:3:2</button>
										<view>呼吸频率</view>
									</view>
									<view>
										<button>1:3:2</button>
										<view>呼气末正压</view>
									</view>
									<view>
										<button>1:3:2</button>
										<view>氧浓度</view>
									</view>
								</view>
							</view>
						</view>
						<view class="typeTitle" v-show="box4">
							<text class="typeTitle-head">超声</text>
							<text class="typeTitle-content">详细数据</text>
						</view>
						<view class="chaoshengbo" @click="chaoshengbo" v-show="box4"><image src="../static/image/Bitmap@2x.png" mode=""></image></view>
					</view>
				</view>
			</view>
			<!-- 连接诊疗室-房号 -->
			<!-- <div
            id="videos"
            style="width: 578px;height: 261px;background-color: #f0f0f0;"
          >

          </div>
        </div> -->
			<!-- 未接入呼吸机情况 如果未接入，则显示ecg-content，隐藏right-c-nr2、right-c-nr3-->
			<!-- <div class="ecg-content">
						
					</div> -->
			<!-- </div> -->
			<uni-popup ref="popup" type="dialog" :before-close="true" @close="close">
				<view class="gcs-pop">
					<view class="popTitle">
						<text>设置</text>
						<text class="closeBtn" @click="close"></text>
					</view>
					<view class="popContentBox">
						<view class="gcs-review">
							<view class="redio-box">
								<view class="redio-box-title"></view>
								<view class="redio-box-list">
									<checkbox-group @change="checkChange" style="display: flex; justify-content: space-between;">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items2" :key="item.value">
											<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.6)" />
											{{ item.name }}
										</label>
									</checkbox-group>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <uni-popup-dialog type="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog> -->
			</uni-popup>

			<uni-popup ref="popup1" type="dialog" :before-close="true" @close="close">
				<view class="yaoqing-pop">
					<view class="popTitle">
						<text>邀请参会</text>
						<text class="closeBtn" @click="close1"></text>
					</view>

					<view class="popContentBox">
						<view class="pop-item">
							<view class="pop-item-title">中日友好医院</view>
							<view class="pop-item-des" style="border-bottom: 1px solid rgba(223,229,249,1);">
								<view class="left">中</view>
								<view class="middle">急诊科</view>
								<view class="right" @click="videoYaoqing">邀请</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <uni-popup-dialog type="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog> -->
			</uni-popup>
		</view>
		<uni-drawer ref="drawer" :width="383">
			<view class="yaoqing-pop">
				<view class="popTitle">
					<text>邀请参会</text>
					<text class="closeBtn" @click="close1"></text>
				</view>
				<view class="invitationType">
					<view>
						<view :class="indexs == 0 ? 'actives' : ''" @click="indexs = 0">医院</view>
						<view :class="indexs == 1 ? 'actives' : ''" @click="indexs = 1">科室</view>
						<view :class="indexs == 2 ? 'actives' : ''" @click="indexs = 2">医生</view>
					</view>
				</view>
				<view class="popContentBox scrollBar">
					<view class="pop-item">
						<!-- <view class="pop-item-title">中日友好医院</view> -->
						<view class="pop-item-des" v-for="(item, index) in partDoctorList" :key="index" style="border-bottom: 1px solid rgba(223,229,249,1);">
							<view class="left">中</view>
							<view class="middle">{{ item.name }}</view>
							<view class="right" @click="videoYaoqing(item.commonIDss)">邀请</view>
						</view>
						<view class="station"></view>
					</view>
				</view> 
			</view>
		</uni-drawer>
		
		<agoracom></agoracom>
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import ChartTimer from '@/components/chart-timer.js';
// 声网视频
import { AgoraRTC } from '@/components/AgoraRTCSDK-3.1.1.js';
import K from '@/components/KunyuAgora.js';
// 声网房间
// import RtmClient from '@/components/rtm-client.js';
import agoracom from '@/components/agoraComponents.vue'
export default {
	components: { uniSegmentedControl, uniPopup, uniDrawer, agoracom},
	data() {
		return {
			items: ['普通病历', '卒中NHISS评分'],
			current: 0,
			dType: 1,
			patient120: {},
			dispatchCase: {},
			indexs: 0,
			answerList: {},
			doctorList: [], // 专家列表
			partDoctorList: [], // 部分专家列表
			imdex: 0,
			rtc: {},
			hujiaobox: false,
			btnFlag: false,
			length: 0,
			top: 21,
			box1: true,
			box2: true,
			box3: true,
			box4: true,
			items2: [
				{
					value: '1',
					name: '患者病历档案',
					checked: 'true'
				},
				{
					value: '2',
					name: '心电监护窗口',
					checked: 'true'
				},
				{
					value: '3',
					name: '呼吸机窗口',
					checked: 'true'
				},
				{
					value: '4',
					name: '超声窗口',
					checked: 'true'
				}
			],
			caseInfoMange: {},
			reportList: '',
			// 分辨率选择器
			couponList: [
				{
					name: '1080p',
					id: '1080'
				},
				{
					name: '720p',
					id: '720'
				},
				{
					name: '480p',
					id: '480'
				}
			],
			couponSelected: '',
			// 计时器
			ss: '00',
			mm: '00',
			hh: '00',
			// 图表相关
			chartTimer: '',
			cWidth: '',
			cHeight: '',
			pixelRatio: '2',
			option: '',
			params: '',
			// 声网聊天室
			rtm: '',
			channelId: '', // 房间号
			destUid: 'test1', // 发给谁
			//健康档案 背景图是否显示
			isArchives: true,
			//声网视频
			channel: '',
			uid: '',
			agoraOb: null,
			userRole: 1,
			playLists: [],
			flag: 1, // 默认值
			renderStream: function() {},
			appid: '9c3a9d03dac14f2cbcb2dcaa63d2a48a',
			max_video: 'max_video_',
			min_video: 'local_stream'
		};
	},
	onLoad() {
		const that = this;
		that.carInfo();
		that.getAnswer();
		// that.call();
		that.report();
		that.getCaseInfo();
		var count = 0;
		var timer = null; //timer变量记录定时器setInterval的返回值
		timer = setInterval(function() {
			count++;
			// 需要改变页面上时分秒的值
			that.ss = showNum(count % 60);
			that.mm = showNum(parseInt(count / 60) % 60);
			that.hh = showNum(parseInt(count / 60 / 60));
		}, 1000); //封装一个处理单位数字的函数
		function showNum(num) {
			if (num < 10) {
				return '0' + num;
			}
			return num;
		}
		//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
		that.couponSelected = that.couponList[0].id;
	},
	onReady() {
		setTimeout(() => {
			if (!getApp().globalData.uid) {
				this.$http.post(`/treat/web/v1/user/info`).then(res => {
					// 存储
					getApp().globalData.uid = res.data.userMark;
					this.uid = getApp().globalData.uid;
					console.log(this.uid);
					// 声网视频
					this.init();
					this.join();
				});
			}else {
				this.uid = getApp().globalData.uid;
				// 声网视频
				this.init();
				this.join();
			}
		}, 100);
		
		
		
		// 图表
		var chartFun = function(e) {
			e.setWH(200, 200, 700, 70, '#c5c5c5');
		};
		var chartFun1 = function(e) {
			e.setWH(200, 200, 400, 30, '#c5c5c5');
		};

		var charts = {
			mdc_ecg_elec_potl_i: chartFun,
			mdc_ecg_elec_potl_ii: chartFun1
		};

		new ChartTimer(charts, this)
			.setInterval(80)
			.testData()
			.run();
	
		// 获取声网聊天室id
		// this.getChanneId();
	},
	methods: {
		// 邀请
		hujiao(e) {
			// console.log(e);
			// // e.preventDefault();
			// if (!this.rtm._logined) {
			// 	console.log('Please Login First');
			// 	return;
			// }
			// // 用户名房间号是写死的 没有
			// var msg = JSON.stringify({
			// 	sourceUid: this.uid, 
			// 	destUid: this.destUid, 
			// 	channelId: this.channelId, 
			// 	doAction: e // 状态
			// });

			// var params = {
			// 	appID: this.appid,
			// 	channel: this.channelId,
			// 	uid: this.uid,
			// 	channelMessage: msg
			// 	// {"sourceUid":"11111","destUid":"1590796284","channelId":"991","doAction":"1"}
			// };

			// console.log('-----------------');
			// console.log(this.rtm.channels);
			// // if (!this.rtm.channels[params.channel] || (this.rtm.channels[params.channel] && !this.rtm.channels[params.channel].joined)) {
			// // 	console.log('Please Join first');
			// // 	return false;
			// // }
			// console.log(this.rtm.channels);
			// this.rtm
			// 	.sendChannelMessage(params.channelMessage, params.channel)
			// 	.then(() => {
			// 		const view = ' text: account: ' + this.rtm.accountName + ' send : ' + params.channelMessage + ' channel: ' + params.channel;
			// 		console.log(view);
			// 		// 通过id查询专家列表名字
			// 		switch (e) {
			// 			case 2:
			// 				this.$refs.popup10.close();
			// 				break;
			// 			case 3:
			// 				this.$refs.popup10.close();
			// 				//  跳转视频页面
			// 				// uni.navigateTo({
			// 				// 	url:'./patientRecord'
			// 				// })
			// 				console.log('切换频道');
			// 				break;
			// 			default:
			// 				break;
			// 		}
			// 		this.hujiaobox = true;
			// 	})
			// 	.catch(err => {
			// 		console.error(err);
			// 	});
		},
		// 获取专家列表
		getDoctorList() {
			this.$http
				.post(`/treat/web/v1/treat/dep/allhospital`)
				.then(res => {
					this.partDoctorList = [];
					this.doctorList = res.data;
					this.doctorList.forEach(Element => {
						if (Element.type == '1') {
							this.partDoctorList.push(Element);
						}
					});
					// console.log(this.doctorList);
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 普通病例-患者信息
		getCaseInfo() {
			this.$http.post(`/api/web/v1/base/patientMsg`, { carID: 7 }).then(res => {
				this.caseInfoMange = res.data;
			});
		},
		// 返回
		onPath() {
			uni.redirectTo({
				url: './consultationList'
			});
		},
		checkChange(e) {
			
			var items = this.items,
				values = e.detail.value;
			this.box1 = false;
			this.box2 = false;
			this.box3 = false;
			this.box4 = false;
			// let values = e.detail.value
			if (values.includes('1')) {
				this.box1 = true;
			}
			if (values.includes('2')) {
				this.box2 = true;
			}
			if (values.includes('3')) {
				this.box3 = true;
			}
			if (values.includes('4')) {
				this.box4 = true;
			}
		},
		videoYaoqing(e) {
			this.destUid = e;
			// this.$refs.popup1.close();
			this.$refs.popup1.close();
			// $('.hujiaozhong').attr('style', 'top:' + (this.top + 144) + 'px');
			this.hujiao(1);
		},
		yaoqing() {
			this.getDoctorList();
			this.$refs.drawer.open();
			// this.$refs.popup1.open();
		},
		jieshu() {
			this.agoraOb.leave();
		},
		// 切换分辨率
		getCouponSelected() {
			console.log(this.couponSelected);
			this.agoraOb.setResolutions(this.couponSelected);
		},
		close1() {
			this.$refs.drawer.close();
			// this.$refs.popup1.close();
		},
		shezhi() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		huxiji() {
			uni.redirectTo({
				url: './huxiji'
			});
		},
		xindiantu() {
			// window.open('xindiantu', '_blank');
			uni.redirectTo({
				url: './xindiantu'
			});
		},
		chaoshengbo() {
			uni.redirectTo({
				url: './chaoshengbo'
			});
			// window.open('chaoshengbo', '_blank');
		},

		carInfo() {
			this.$http.postForm(`/pad/v1/dispatch/case/getOne`, { id: 25 }).then(res => {
				// alert(1111);
				this.patient120 = res.data.patient120;
				this.dispatchCase = res.data.dispatchCase;
			});
		},
		getAnswer() {
			this.$http.postForm(`/pad/v1/nhiss/answer/appGetAnswer`, { dispatchId: 25 }).then(res => {
				this.answerList = res.data;
			});
		},
		report() {
			this.$http.postForm(`/web/v1/report/reportList`, { dispatchId: 15 }).then(res => {
				this.reportList = res.data;
			});
		},
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		},
		diaoduBtn() {
			this.index = 1;
		},
		patientBtn() {
			this.index = 2;
		},
		zhenduanBtn() {
			this.index = 3;
		},
		changeSelect(type) {
			if (this.dType !== type) this.dType = type;
		},

		// 视频 通话
		init() {
			var _this = this;
			this.agoraOb = new K(
				this.appid,
				this.uid,
				this.channel, // 房间号
				function(uid, remoteStream) {
					// 远程用户id 远程用户流 远程用户加入房间处理
					_this.flag = 2;
					console.log('----------------------uid:------------' + uid);
					console.log('------------------channel                  :' + _this.channel);
					if (_this.uid != uid) {
						var id = '';
						if (uid == _this.channel) {
							console.log('----------------------uid:------------' + uid);
							_this.max_video += uid;
							id = 'max_video_' + uid;
						} else {
							id = 'remote_video_' + uid;
							_this.playLists.push(uid);
						}
						_this.renderStream = function() {
							remoteStream.play(id);
						};
					}
				},
				function(uid) {
					// 用户离开
					_this.playLists.splice(_this.playLists.indexOf(uid), 1);
				}
			);
		},
		join() {
			// j进入房间
			this.agoraOb.join();
		},
		leave() {
			// 自己离开
			this.agoraOb.leave();
		},
		setUid() {
			//
			this.agoraOb.config.uid = this.uid;
			this.agoraOb.refresh();
		},
		setChannel() {
			//修改频道
			this.agoraOb.config.channel = this.channel;
			this.agoraOb.refresh();
		},
		buildEleId(ele, id) {
			return ele + id;
		},
		getRemoteStreams() {
			// 获取全部远程的流
			console.log(this.agoraOb.rtc.remoteStreams);
		},
		audience() {
			return;
			for (let [key, value] of Object.entries(this.agoraOb.rtc.remoteStreams)) {
				console.log(key);
			}
		},
		anchor() {
			return;
			this.agoraOb.rtc.remoteStreams.muteAudio();
		},
		toogle() {
			this.agoraOb.rtc.localStream.stop();
			this.agoraOb.rtc.localStream.play('local_stream_max');
			this.agoraOb.rtc.localStream.play('local_stream');
		}
	},
	updated: function() {
		var _this = this;
		this.$nextTick(
			function() {
				if (_this.flag == 2) {
					console.log('updated flag: ' + _this.flag);
					_this.renderStream(); // 播放
					_this.flag = 1;
				}
			}.call(this)
		);
	},
	watch: {
		indexs() {
			this.partDoctorList = [];
			switch (this.indexs) {
				case 0:
					this.doctorList.forEach(Element => {
						if (Element.type == '1') {
							this.partDoctorList.push(Element);
						}
					});
					break;
				case 1:
					this.doctorList.forEach(Element => {
						if (Element.type == '2') {
							this.partDoctorList.push(Element);
						}
					});
					break;
				case 2:
					this.doctorList.forEach(Element => {
						if (Element.type == '3') {
							this.partDoctorList.push(Element);
						}
					});
					break;
				default:
					break;
			}
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.patient-record {
	height: 100vh;
	overflow: hidden;

	.con-content {
		display: flex;
		justify-content: space-between;
		// padding: 19.79px 16.62px;
		.con-video {
			width: 75%;
			height: 100vh;
			background: rgba(39, 39, 39, 1);
			position: relative;
			margin-right: 10px;
		}
		.con-detail {
			height: 100vh;
			flex: 1;
			overflow: auto;
			padding-right: 4px;
			min-width: 385px;
		}
	}
	.con-box {
		width: 100%;
		border: 1px solid rgba(226, 226, 226, 1);
		// padding: 7.01px 15.83px 19px;
		box-sizing: border-box;
		.con-tab {
			height: 47px;
			display: flex;
			justify-content: space-around;
			font-size: 16px;
			color: #888888;
			line-height: 47px;
			background-color: #f6f6f6;
			border-bottom: 1px solid #fff;
			box-sizing: border-box;
			text {
				flex: 1;
				height: 47px;
				text-align: center;
				color: #888;
				cursor: pointer;
				box-sizing: border-box;
				span {
					height: 47px;
					line-height: 47px;
				}
			}
			.active {
				color: #2b81e3;
				border-bottom: 1px solid #2b81e3;
				// background: rgba(49, 131, 224, 1);
			}
		}
		.con-des {
			height: 288px;
			overflow: hidden;
			view {
				font-size: 12px;
				line-height: 12px;
				margin: 31px 0 0 14px;
				text {
					&:nth-child(1) {
						color: rgba(49, 131, 224, 1);
					}
				}
			}
			.color3 {
				color: #333 !important;
			}
		}
		.color3 + text {
			margin-right: 14px;
			float: right;
			a {
				text-decoration: none;
				color: rgba(49, 131, 224, 1);
			}
		}
	}
	.patient-record {
		height: 100vh;
	}
	.segmented-control {
		background: #f0f7ff;
		margin-top: 0;
		height: 95.13px;
		// color: #333333;
	}
	.patient-record-content {
		.patient-record-tags {
			display: flex;
			justify-content: space-between;
			padding: 50.69px 36.11px 78.47px 42.36px;
			.patient-record-tag {
				text-align: center;
				font-size: 29.16px;
				color: #c3c3c3;
				image {
					margin-right: 20.83px;
					vertical-align: bottom;
				}
				.jijiu {
					width: 39.58px;
					height: 38.19px;
				}
				.fill1 {
					width: 31.94px;
					height: 31.94px;
				}
				.fill2 {
					width: 32.63px;
					height: 32.63px;
				}
			}
			.active {
				color: rgba(49, 131, 224, 1);
			}
		}
		.patient-info {
			padding-left: 27.77px;
			font-size: 25px;
			view {
				text {
					color: rgba(144, 144, 144, 1);
				}
			}
			.patient-info-line {
				height: 0.69px;
				background: rgba(222, 222, 222, 1);
				margin: 29.16px 0 33.33px;
			}
			.patient-address {
				display: flex;
				padding-right: 27.08px;
				view {
					&:first-child {
						color: rgba(144, 144, 144, 1);
					}
					&:last-child {
						flex: 1;
					}
				}
			}
		}
		.patient-des-total {
			margin: 27.77px;
			width: 694.44px;
			height: 95.13px;
			line-height: 95.13px;
			background: rgba(245, 246, 250, 1);
			font-size: 29.16px;
			padding-left: 27.77px;
			box-sizing: border-box;
			text {
				color: rgba(49, 131, 224, 1);
				margin-right: 20.83px;
			}
		}
		.patient-des {
			font-size: 25px;
			padding: 0 27.77px;
			.patient-des-item {
				display: flex;
				text {
					&:first-child {
						width: 60%;
					}
					&:nth-child(2) {
						width: 30%;
					}
					&:last-child {
						width: 10%;
					}
				}
			}
			.patient-des-item-title {
				font-size: 29.16px;
				color: rgba(149, 153, 157, 1);
				line-height: 43.75px;
				margin-bottom: 41.66px;
			}
			.patient-des-line {
				height: 0.69px;
				background: rgba(222, 222, 222, 1);
				margin: 29.16px 0 33.33px;
			}
		}
	}
	.charts {
		width: 100%;
		// height:115.58px;
		// border:1.58px solid rgba(226,226,226,1);
		font-size: 12px;
		font-family: HelveticaNeue-Medium, HelveticaNeue;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		// line-height:9.5px;

		.xindiantu-top {
			display: flex;
			border-top: 1px solid rgba(226, 226, 226, 1);
			border-bottom: 1px solid rgba(226, 226, 226, 1);
			.left {
				width: 25%;
				box-sizing: border-box;
				padding: 1%;
				border-left: 1px solid rgba(226, 226, 226, 1);
				.left-top,
				.left-bottom {
					display: flex;
					justify-content: space-between;
				}
				.left-bottom {
					height: 30px;
					margin-top: 9.5px;
					align-items: baseline;
				}
			}
			.middle {
				width: 42%;
				box-sizing: border-box;
				padding: 1%;
				border-left: 1px solid rgba(226, 226, 226, 1);
				border-right: 1px solid rgba(226, 226, 226, 1);
				.middle-top {
					display: flex;
					justify-content: space-between;
				}
				.middle-bottom {
					display: flex;
					justify-content: space-between;
					margin-top: 9.5px;
					.tr {
					}
				}
			}
			.right {
				width: 33%;
				box-sizing: border-box;
				padding: 1%;
				border-right: 1px solid rgba(226, 226, 226, 1);
				.right-top {
					display: flex;
					justify-content: space-between;
				}
				.right-bottom {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-top: 7px;
				}
			}
		}
		.xindiantu-bottom {
			display: flex;
			border-bottom: 1px solid rgba(226, 226, 226, 1);
			.left {
				flex: 1;
				// width: 25%;
				padding: 7.91px;
				border-left: 1px solid rgba(226, 226, 226, 1);
				// display: flex;
				box-sizing: border-box;
				.left-top {
					display: flex;
					justify-content: space-between;
				}
				.left-middle {
					text-align: center;
				}
				.left-bottom {
					text-align: right;
				}
			}
			.middle1 {
				flex: 1;
				box-sizing: border-box;
				padding: 1%;
				border-left: 1px solid rgba(226, 226, 226, 1);
				.middle1-top {
					display: flex;
					justify-content: space-between;
				}
				.middle1-middle {
					text-align: center;
				}
				.middle1-bottom {
					text-align: right;
				}
			}
			.middle2 {
				flex: 1;
				// width: 25%;
				padding: 1%;
				border-left: 1px solid rgba(226, 226, 226, 1);
				box-sizing: border-box;
				.middle2-top {
					display: flex;
					justify-content: space-between;
				}
				.middle2-middle {
					text-align: center;
					line-height: 23.75px;
				}
				.middle2-bottom {
					text-align: right;
				}
			}
			.right {
				flex: 1;
				box-sizing: border-box;
				padding: 1%;
				// width: 25%;
				border-left: 1px solid rgba(226, 226, 226, 1);
				border-right: 1px solid rgba(226, 226, 226, 1);
				.right-top {
				}
				text:nth-child(1) {
					float: left;
				}
				text:nth-child(2) {
					float: right;
				}
			}
		}
		.font15 {
			font-size: 23.75px;
			font-family: Arial-BoldMT, Arial;
			margin-top: 0;
			font-weight: 600;
		}
		.xindiantu-chart {
			width: 100%;
			height: 53px;
			text-align: center;
			border-right: 1px solid rgba(226, 226, 226, 1);
			border-left: 1px solid rgba(226, 226, 226, 1);
			border-bottom: 1px solid rgba(226, 226, 226, 1);
			border-top: 0;
			box-sizing: border-box;
			display: flex;
			text {
				width: 20px;
				line-height: 12px;
				font-size: 12px;
				margin-top: 10px;
			}
			.monitor-left-item-charts {
				flex: 1;
				margin-right: 20px;
			}
		}
		.huxiji {
			font-size: 12px;
			font-family: HelveticaNeue-Medium, HelveticaNeue;
			font-weight: 500;
			margin-top: 4.38px;
			.huxiji-top {
				height: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid rgba(240, 240, 240, 1);
				padding: 3.16px 7.91px;
				view {
					.img1 {
						width: 20px;
						height: 20px;
					}
					.img2 {
						width: 20px;
						height: 20px;
						margin-left: 10px;
					}
				}
			}
			.huxiji-left {
				display: flex;
				height: 220px;
				display: flex;
				border-top: 1px solid rgba(240, 240, 240, 1);
				border-right: 1px solid rgba(240, 240, 240, 1);
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				margin-bottom: 10px;
				.huxiji-image {
					width: 50px;
					display: flex;
					flex-direction: column;
					// height: 109.64px;
					justify-content: space-around;
					// align-items: center;
					view {
						height: 100%;
						width: 100%;
						border-left: 1px solid rgba(240, 240, 240, 1);
						border-bottom: 1px solid rgba(240, 240, 240, 1);
						text-align: center;
						line-height: 55.16px;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
					}
					.img1 {
						width: 13.15px;
						height: 18.42px;
					}
					.img2 {
						width: 11.4px;
						height: 18.42px;
					}
					.img3 {
						width: 9.64px;
						height: 18.42px;
					}
				}
				.huxiji-middle {
					width: 110px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.huxiji-content {
						flex: 1;
						border: 1px solid rgba(240, 240, 240, 1);

						.top {
							min-width: 108px;
							padding: 3% 5%;
							box-sizing: border-box;
							border-top: 0;
							display: flex;
							justify-content: space-between;
						}
						.middle-top {
							font-size: 14px;
							text-align: left;
							margin-left: -10px;
							width: 50px;
							text {
								display: block;
								height: 12px;
								line-height: 12px;
								font-size: 20px;
								transform: scale(0.5);
							}
							text:nth-child(1) {
								color: #333;
							}
							text:nth-child(2) {
								color: #888;
							}
							span {
								margin-left: 20px;
							}
						}
						.middle-bottom {
							margin-top: 5.26px;
							font-size: 14px;
							font-family: Arial-BoldMT, Arial;
							font-weight: normal;
							text-align: center;
						}
					}
				}
			}
			.huxiji-right {
				width: 54%;
				position: relative;
				.xindiantu-chart {
					// width: 200px;
					height: 220px;
					border-left: 0;
					position: relative;
					border-bottom: 0;
				}
				.right-bottom {
					// flex: 1;
					height: 110px !important;
					display: flex;
					justify-content: space-between;
					// border-bottom: 1px solid #f0f0f0;
					height: 100%;
					box-sizing: border-box;
					.item {
						// flex: 1;
						// height: 100%;
						display: flex;
						justify-content: space-between;
						padding: 4.75px 7.91px;
						border-top: 1px solid #f0f0f0;
						border-right: 1px solid #f0f0f0;
					}
				}
			}
			.huxiji-right-btns {
				// width: 17%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-top: 12px;
				box-sizing: border-box;
				> view {
					// display: flex;
					button {
						width: 56px;
						height: 26px;
						line-height: 28px;
						background-color: #1e9eb8;
						color: #ffffff;
						margin: auto;
						text-align: center;
						padding: 0;
					}
					view {
						width: 200%;
						transform: scale(0.5);
						height: 20px;
						font-size: 20px;
						font-weight: 500;
						line-height: 20px;
						text-align: center;
						margin-left: -49%;
					}
				}
			}
			.huxiji-bottom {
				display: flex;
				.bottom-item {
					display: flex;
					justify-content: space-between;
					width: 25%;
					padding: 7.91px;
					border: 1px solid rgba(240, 240, 240, 1);
				}
			}
		}
		.chaoshengbo {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			box-sizing: border-box;
			padding-bottom: 20px;
			image {
				width: 100%;
				height: 190px;
			}
		}
		.typeTitle {
			margin: 20px 0 15px 0;
			height: 12px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.typeTitle-head {
				height: 12px;
				font-size: 14px;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 14px;
			}
			.typeTitle-content {
				height: 12px;
				font-size: 12px;
				font-weight: 500;
				color: rgba(164, 164, 164, 1);
				line-height: 18px;
			}
		}
		.smail {
			// margin-top: -2px;
			float: right;
			text-align: right;
		}
	}
}

.hujiaozhong {
	width: 260px;
	height: 155px;
	background: rgba(125, 125, 125, 1);
	color: rgba(255, 255, 255, 1);
	overflow: hidden;
	.hujiaozhong-title {
		font-size: 20px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		line-height: 20px;
		margin-top: 11px;
		padding-left: 10px;
		box-sizing: border-box;
	}
	.hujiaozhong-des {
		text-align: center;
		font-size: 20px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #ffffff;
		line-height: 20px;
		margin: 29px 0 21px;
	}
	button {
		width: 137px;
		height: 40px;
		line-height: 40px;
		background: #32a594;
		border-radius: 40px;
		font-size: 14px;
		color: #ffffff;
	}
}

.agora-theme .collapsible-header {
	border: none;
}

.agora-theme .btn-primary {
	color: #fff;
	background-color: #1e88e5 !important;
}

.agora-theme .agora-github-pin {
	background: url('')
		no-repeat round;
	width: 55px;
	height: 55px;
	position: absolute;
	right: 0;
}

.agora-theme .agora-primary-bg {
	color: #fff;
	background-color: #1e88e5 !important;
	align-items: center;
}

.agora-theme .card.container {
	margin-left: 20px;
}

.agora-theme h5 {
	margin: 0;
	margin-left: 20px;
}

.agora-theme nav {
	height: 55px;
}

.agora-theme .agora-secondary-border {
	border: 1px solid #424242 !important;
}

.agora-theme .agora-secondary-bg {
	color: #fff;
	background-color: #424242 !important;
	align-items: center;
}

.agora-theme .switch {
	height: 55px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.agora-theme .switch h6 {
	margin: 0;
}

.agora-theme #local_stream {
	position: relative;
}

.agora-theme #local_video_info {
	position: absolute;
}

.agora-theme .video-view {
	position: absolute;
	right: 20px;
	bottom: 20.58px;
	width: 260px;
	height: 155px;
	z-index: 999;
}

// .agora-theme .video-view {
//   width: 480px;
//   height: 320px; }
.agora-theme .video-placeholder {
	width: 205.83px;
	height: 121.91px;
}
.agora-theme #local_stream,
.agora-theme #local_video_info {
	width: 100%;
	height: 100%;
	// width: 100px;
	// height: 100px;
	// background-color: #4CD964;
}

.agora-theme .video-profile {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	z-index: 2;
	color: #fff;
	opacity: 0.9;
	text-shadow: black 0.1em 0.1em 0.2em;
	font-size: 14px;
}

.agora-theme .video-grid {
	height: 100%;
	// display: grid;
	position: relative;
	grid-gap: 20px;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: auto;
}

.agora-theme .autoplay-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	// width: 100%;
	// height: 100%;
	top: 0;
	display: block;
	cursor: pointer;
}
.agora-theme .autoplay-fallback::after {
	font-size: 14px;
	opacity: 0.9;
	text-shadow: black 0.1em 0.1em 0.2em;
	display: block;
	color: #fff;
}
.agora-theme,
.s7 {
	height: 100%;
}
.uni-tip-group-button {
	position: absolute;
	bottom: 26px;
	left: 11.14px;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	text-align: center;
	button {
		width: 125.43px;
		height: 42.1px;
		line-height: 42.1px;
		background: rgba(90, 90, 90, 0.59);
		border-radius: 47.36px;
		font-size: 10.55px;
		// opacity:0.59;
		margin-left: 25.8px;
		color: #ffffff;
		&:nth-child(1)::before {
			content: '';
			position: absolute;
			background: url('./../static/image/Fill 1@2x (3).png');
			width: 14.06px;
			height: 14.06px;
			background-size: 100% 100%;
			margin: 14.03px 0 0 -20.62px;
		}
		&:nth-child(2)::before {
			content: '';
			position: absolute;
			background: url(./../static/image/tuichu@2x.png);
			width: 14.06px;
			height: 14.06px;
			background-size: 100% 100%;
			margin: 14.03px 0 0 -20.62px;
		}
		&:nth-child(3) {
			background: #fd3b2f;
			&::before {
				content: '';
				position: absolute;
				background: url(./../static/image/jieshu@2x.png);
				width: 14.06px;
				height: 14.06px;
				background-size: 100% 100%;
				margin: 14.03px 0 0 -20.62px;
			}
		}
	}
	image {
		width: 90px;
		height: 90px;
	}
	.shezhi-btn {
		width: 41.66px;
		height: 41.66px;
		background: rgba(128, 128, 128, 1);
		border-radius: 38px;
		opacity: 0.59;
		line-height: 52.77px;
		image {
			width: 22.22px;
			height: 22.22px;
		}
	}
	.vioce {
		width: 14.03px;
		height: 14.03px;
		margin: 9.64px 10.52px 0 54.38px;
	}
}
.gcs-pop {
	width: 583.33px;
	height: 263.15px;
	background-color: #fff;
	.popTitle {
		padding-left: 10px;
		height: 38px;
		background: rgba(221, 237, 255, 1);
		text {
			display: block;
			// height: 38px;
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: rgba(49, 131, 224, 1);
			line-height: 38px;
		}
		.closeBtn {
			position: absolute;
			right: 10px;
			top: 13px;
			width: 13px;
			height: 13px;
			background: url('../static/image/guanbi@2x (3).png') center center;
			background-size: cover;
		}
	}
	.popContentBox {
		padding: 20px;

		.gcs-review {
			// position: relative;
			// min-height: 240px;
			.redio-box {
				// float: left;
				// width: 170px;
				&:first-child {
					// margin-left: 60px;
				}
				.redio-box-title {
					font-size: 14px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: rgba(49, 131, 224, 1);
					line-height: 22px;
					margin-bottom: 15px;
				}
				.redio-box-list {
					font-size: 13px;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					line-height: 25px;
					/deep/ uni-radio {
						color: rgba(51, 51, 51, 1);

						/deep/.uni-radio-input {
							width: 14px;
							height: 14px;
							background-color: #fff;
							color: rgba(51, 51, 51, 1);
							border: 1px solid rgba(49, 131, 224, 1);
							&.uni-radio-input-checked {
								// width: 13px;
								// height: 13px;
								background-color: #fff !important;
								//
								// border: 1px solid #fff;
								&::before {
									// position: absolute;
									display: inlin-block;
									// left: 0;
									// top: 0;
									z-index: 1;
									border-radius: 16px;
									content: ' ';
									background-color: rgba(49, 131, 224, 1);
									width: 16px;
									height: 16px;
									// border: 1px solid #FFFFFF;
									// margin: -1px 0 0 0px;
								}
							}
						}
					}
				}
			}
			&:after {
				content: ' ';
				display: inline-block;
				font-size: 0;
				width: 10px;
				height: 5px;
			}
		}
		.gcs-count-scope {
			margin: 0 auto 15px;
			width: 556px;
			height: 38px;
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 38px;
			background: rgba(245, 246, 250, 1);
			text {
				color: rgba(49, 131, 224, 1);
				margin-right: 10px;
			}
		}
		.popContentSubBtn {
			text-align: center;
			button {
				width: 110px;
				height: 32px;
				background: rgba(49, 131, 224, 1);
				border-radius: 22px;
				border: 2px solid rgba(108, 175, 250, 1);
				font-size: 14px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 32px;
			}
		}
	}
}
.yaoqing-pop {
	// width:265.78px;
	// height:464.91px;
	// background:rgba(255,255,255,1);
	// 	position: fixed;
	// 	bottom: 81.57px;
	// 	left: 18.42px;
	.popTitle {
		padding-left: 10px;
		height: 38px;
		// background:rgba(221,237,255,1);
		border-bottom: 1px solid rgba(216, 216, 216, 1);
		text {
			display: block;
			// height: 38px;
			font-size: 14.03px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			// color:rgba(49,131,224,1);
			line-height: 38px;
		}
		.closeBtn {
			position: absolute;
			right: 10px;
			top: 13px;
			width: 13px;
			height: 13px;
			background: url('../static/image/guanbi@2x (3).png') center center;
			background-size: cover;
		}
	}
	.popContentBox {
		padding: 30px 10.52px 20px 12.28px;
		height: calc(100vh - 100px);
		overflow: auto;
		box-sizing: border-box;
		.pop-item-title {
			font-size: 14.91px;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: rgba(168, 168, 168, 1);
			line-height: 22.8px;
			margin-bottom: 21.05px;
			margin-top: 18.42px;
		}
		.pop-item-des {
			display: flex;
			align-items: center;
			padding-bottom: 17px;
			margin-bottom: 12px;
			.left {
				width: 45px;
				height: 45px;
				border-radius: 44.73px;
				background: #7ebcc6;
				text-align: center;
				line-height: 45px;
				font-size: 20px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
			.middle {
				flex: 1;
				font-size: 18px;
				height: 45px;
				line-height: 45px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
				margin-left: 12px;
			}
			.right {
				width: 82px;
				height: 30px;
				line-height: 30px;
				background: rgba(49, 131, 224, 1);
				border-radius: 30px;
				font-size: 9.64px;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				padding-left: 28px;
				box-sizing: border-box;
				margin-top: 8px;
				&::before {
					content: '';
					position: absolute;
					background: url(../static/image/add-sy@2x.png);
					background-size: 100% 100%;
					width: 14px;
					height: 14px;
					margin-top: 8px;
					margin-left: -30px;
				}
			}
		}
		.gcs-review {
			// position: relative;
			// min-height: 240px;
			.redio-box {
				// float: left;
				// width: 170px;
				&:first-child {
					// margin-left: 60px;
				}
				.redio-box-title {
					font-size: 14px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: rgba(49, 131, 224, 1);
					line-height: 22px;
					margin-bottom: 15px;
				}
				.redio-box-list {
					font-size: 13px;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					line-height: 25px;
					/deep/ uni-radio {
						color: rgba(51, 51, 51, 1);

						/deep/.uni-radio-input {
							width: 14px;
							height: 14px;
							background-color: #fff;
							color: rgba(51, 51, 51, 1);
							border: 1px solid rgba(49, 131, 224, 1);
							&.uni-radio-input-checked {
								// width: 13px;
								// height: 13px;
								background-color: #fff !important;
								//
								// border: 1px solid #fff;
								&::before {
									// position: absolute;
									display: inlin-block;
									// left: 0;
									// top: 0;
									z-index: 1;
									border-radius: 16px;
									content: ' ';
									background-color: rgba(49, 131, 224, 1);
									width: 16px;
									height: 16px;
									// border: 1px solid #FFFFFF;
									// margin: -1px 0 0 0px;
								}
							}
						}
					}
				}
			}
			&:after {
				content: ' ';
				display: inline-block;
				font-size: 0;
				width: 10px;
				height: 5px;
			}
		}
		.gcs-count-scope {
			margin: 0 auto 15px;
			width: 556px;
			height: 38px;
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 38px;
			background: rgba(245, 246, 250, 1);
			text {
				color: rgba(49, 131, 224, 1);
				margin-right: 10px;
			}
		}
		.popContentSubBtn {
			text-align: center;
			button {
				width: 110px;
				height: 32px;
				background: rgba(49, 131, 224, 1);
				border-radius: 22px;
				border: 2px solid rgba(108, 175, 250, 1);
				font-size: 14px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 32px;
			}
		}
	}
	.station {
		width: 100%;
		height: 150px;
	}
}
.levelLink {
	width: 146.48px;
	height: 29.29px;
	background: rgba(245, 248, 249, 1);
	border-radius: 0.87px;
}
.uni-tip-group-top {
	// position: relative;
	position: absolute;
	top: 40px;
	left: 40px;
	width: 77%;
}
.uni-tip-group-time {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 250px;
	height: 35px;
	line-height: 35px;
	font-size: 14px;
	background: rgba(133, 133, 133, 1);
	border-radius: 20px;
	text-align: center;
	color: #ffffff;
}
.option {
	position: absolute;
	right: 300px;
	top: 40px;
	color: #ffffff;
	width: 60px;
	height: 35px;
	line-height: 35px;
	background: rgba(133, 133, 133, 1);
	border-radius: 40px;
	padding-left: 20px;
	overflow: hidden;
	select {
		width: 100%;
		height: 100%;
		background: rgba(133, 133, 133, 1);
		border: 0;
		outline: none;
		margin-left: -7px;
		color: #ffffff;
	}
}

.monitor-left-item-charts {
	width: 100%;
	height: 100%;
}
.onPath {
	width: 230px;
	height: 63px;
	line-height: 63px;
	background: url('../static/image/Fill_1.png') no-repeat;
	background-position-x: 1px;
	background-position-y: 20px;
	position: absolute;
	top: 0px;
	left: 40px;
	color: #ffffff;
	padding: 0;
	border: 0;
	float: left;
}
uni-button:after {
	content: none;
}
uni-button {
	font-size: 16px;
}
#mdc_ecg_elec_potl_ii {
	box-sizing: border-box;
	// margin-top: 60px;
	top: 78px;
}
.middle1-middle {
	margin: 7px 0 10px 0;
	overflow: hidden;
}
.archives {
	margin: 0 !important;
	image {
		width: 46px;
		height: 46px;
		margin: 100px auto 15px auto;
		display: block;
	}
	view {
		width: 100%;
		height: 12px;
		font-size: 12px;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: rgba(49, 131, 224, 1);
		line-height: 18px;
		text-align: center;
		margin: 0 !important;
	}
}
.video-view1 {
	width: 600px;
	height: 600px;
}
.play_list_videos {
	position: absolute;
	top: 40px;
	right: 20px;
	width: 260px;
	height: 70vh;
	z-index: 1;
	overflow: auto;
	> div {
		width: 100%;
		height: 100%;
		> .remote_video {
			width: 260px;
			height: 155px;
			background-color: #0000ff;
			> .remote_video {
				width: 100% !important;
				height: 100%;
				.remote_video {
					width: 260px;
					height: 155px;
				}
			}
		}
	}
}
#max_window {
	width: 100%;
	height: 100%;
	#max_video_1 {
		width: 100%;
		height: 100%;
	}
}
.max_window {
	width: 100%;
	height: 100%;
}
.uni-tip1 {
	background: url(../static/image/400091852@2x.png);
	width: 610.52px;
	height: 333.33px;
	font-size: 18.42px;
	color: #ffffff;
	padding: 61.4px;
	box-sizing: border-box;
	text-align: center;
	.uni-tip-title1 {
	}
	.uni-tip-group-button1 {
		display: flex;
		button {
			width: 132.45px;
			height: 37.71px;
			background: rgba(224, 58, 49, 1);
			border-radius: 48.24px;
			border: 1px solid rgba(250, 108, 108, 1);
			font-size: 14.03px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-top: 42.1px;
			&:last-child {
				background: rgba(7, 206, 59, 1);
				border: 1px solid rgba(60, 246, 108, 1);
				margin-left: 54.38px;
			}
		}
	}
}
.invitationType {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	margin: 20px 0 0 0;
	box-sizing: border-box;
	> view {
		width: 100%;
		height: 100%;
		border: 1px solid #3796fb;
		border-radius: 30px;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		overflow: hidden;
		view {
			flex: 1;
			line-height: 42px;
			color: #3796fb;
			border-right: 1px solid #3796fb;
			box-sizing: border-box;
			text-align: center;
			cursor: pointer;
		}

		view:nth-child(3) {
			border: 0;
		}
	}
}
.actives {
	background: #3796fb !important;
	color: #ffffff !important;
}
</style>
